/*
 * @Author: CPS
 * @Date: 2020-08-07 16:22:19
 * @Last Modified by: CPS
 * @Last Modified time: 2020-08-24 22:59:54
 * @Projectname Electron-fileWatcher
 * @file_path D:\CPS\MyProject\Electron-fileWatcher\src\renderer\pages\fileWatcher\js\config\index.js
 * @Filename index.js
 */
'use strict'
import './template/config.stylus'
import template from './template/config.pug'
import configEvents from './events/config.event.js'

import settingPage from './setting.js'
import openexecPage from './openexec.js'
import createSubPage from './createSubPage.js'

import icon from './icon/icon.js'

// config 的主要页面结构
let configData = {
  setting: {
    text: '常规设置',
    icon: 'setting'
  },
  openexec: {
    text: '文件打开程序',
    icon: 'link'
  },
  notifiy: {
    text: '弹窗设置',
    icon: 'share'
  },
  other: {
    text: '其他设置',
    icon: 'setting'
  },
}

// 文件打开程序 的页面结构
let execData = {
  icon: 'word',
  text: 'xxxxx/xxx',
  ext: 'doc,docx',
}

//弹窗设置 的页面结构
//其他设置 的页面结构

// 定义组件前缀名
function prefix(name) {
  return 'config__' + name
}

let defaultConfig = {}

class configObject {
  constructor(userConfig) {
    log('创建configObject')
    this.el = this.container = this.content = this.title = this.titleIcon = null
    this.setting = null
    this.openexec = null
    this.cnofig = {}

    if (userConfig) Object.assign(defaultConfig, userConfig)

    this.el = document.createElement('section')
    this.el.className = this.el.id = prefix('component')
    this.el.style.transform = 'translate(150%)'
    this.el.style.opacity = 0

    // 将创建好的实例进行隐藏
    this.el.innerHTML = template({
      data: configData,
      icon: icon
    })

    this.container = this.el.getElementsByClassName(prefix('container'))[0]
    this.content = this.el.getElementsByClassName(prefix('content'))[0]

    document.body.appendChild(this.el)

    this.el.addEventListener('show', this.show)

    configEvents(this)
  }

  /*显示元素,或者显示子页面元素*/
  show(pageName = '', data) {
    switch (pageName) {
      case '常规设置':
        if (!this.setting) this.setting = new settingPage(this.container, data)
        this.setting.show()
        break;

      case '文件打开程序':
        if (!this.openexec) this.openexec = new openexecPage(this.container, data)
        this.openexec.show()
        break;

      case '弹窗设置':


      case '其他设置':

        break;

      default:
        // 默认显示元素
        // this.setTitle('详细设置')
        pageName = '详细设置'
        if (this.el.style.transform == 'translate(150%)') this.el.style.transform = 'translate(0)'
        if (this.el.style.opacity == 0) this.el.style.opacity = 1
        break;
    }

    this.setTitle(pageName)
  }

  /*设置标题*/
  setTitle(newTitle, newIcon) {
    if (newTitle) {
      if (!this.title) this.title = document.getElementById(prefix('title'))
      this.title.innerHTML = newTitle
    }

    if (newIcon) {
      if (!this.titleIcon) this.titleIcon = document.getElementById(prefix('titleIcon'))
      this.titleIcon.innerHTML = icon.svg[newIcon]
    }
  }

  send(action, data = null) {
    let e
    if (data) {
      e = new Event(action)
    } else {
      e = new CustomEvent(action, {
        detail: {
          data,
        },
        bubbles: false, //是否冒泡
        cancelable: false //是否取消默认事件
      })
    }
    this.el.dispatchEvent(e)
  }

  close() {

  }
}
export default configObject